<template>
  <div class="home-page">
    <div class="hero-section">
      <div class="hero-content">
        <h1>Bingelaoda</h1>
        <p>普通人的一生，乱世之炮灰，盛世之牛马</p>
      </div>
    </div>
    <div class="articles-section">
      <aside class="categories-panel">
        <h2 class="categories-title">Categories</h2>
        <ul class="categories-list">
          <li v-for="category in categories" :key="category" @click="selectCategory(category)" class="category-item">
            {{ category }}
          </li>
        </ul>
      </aside>
      <section class="article-list-panel">
        <ul class="article-list">
          <li v-for="article in filteredArticles" :key="article.title" class="article-item">
            <router-link :to="`/article/${article.filename}`">{{ article.title }}</router-link>
          </li>
        </ul>
      </section>
    </div>
  </div>

</template>

<script>
import { marked } from 'marked';
export default {
  data() {
    return {
      categories: ['Java', 'Network Programming'],
      selectedCategory: null,
      articles: [
        { title: 'example', category: 'Java',filename: 'example.md' },
        { title: 'The founder of Java', category: 'Java' },
        // Add more articles here
      ],
      filteredArticles: [],
      currentArticleContent: '', // 添加这行
    };
  },
  methods: {
    selectCategory(category) {
      this.selectedCategory = category;
      this.filteredArticles = this.articles.filter(article => article.category === category);
    },
    async openArticle(article) {
      // Implement navigation to the article here
      const response = await fetch(`./markdown/${article.filename}`);
      const markdown = await response.text();
      this.currentArticleContent = marked(markdown);
    }
  },
  mounted() {
    this.filteredArticles = this.articles;
  }
}
</script>

<style scoped>
/* Reset */
.home-page {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent page from scrolling */
}

/* Hero section */
.hero-section {
  background-image: url('../assets/girl.png');
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.hero-content h1, .hero-content p {
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  text-align: center;
}

/* Articles section */
.articles-section {
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  height: 56vh;
  /* padding: 20px; */
  margin-top: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* Hide overflow */
}

/* Categories panel */
.categories-panel {
  background-image: url('../assets/girl.png');
  flex: 1;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  margin-right: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow-y: auto; /* Enable scrolling */
}

.categories-title {
  margin-bottom: 20px;
  font-size: 24px;
}

.categories-list {
  list-style: none;
  padding: 0;
}

.category-item {
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.category-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Articles list panel */
.article-list-panel {
  background-image: url('../assets/girl.png');
  flex: 3;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow-y: auto; /* Enable scrolling */
}

.article-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.article-item {
  cursor: pointer;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
}

.article-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
</style>
